<!--
  Generated template for the ProductOptionModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-buttons start>
      <button ion-button (click)="closeModal()" small clear>
        {{ 'CANCEL' | translate }}
      </button>
    </ion-buttons>
    <ion-title>{{ global.product['name'] }}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()" small clear>
        {{ 'SAVE' | translate }}
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>

  <div class="product-options-group" *ngIf="productVariantList.length > 0">
    <super-tabs scrollTabs>
      <super-tab *ngFor="let variant of productVariantList" [root]="productOptionListPage" [rootParams]="variant" title="{{ variant.name }}"></super-tab>
    </super-tabs>
  </div>
  <div class="product-qty-group" [ngClass]="{ 'hidden': productVariantList.length>0 }">
    <ion-row>
      <ion-col col-4><div class="title">{{ 'QUANTITY' | translate}}</div></ion-col>
      <ion-col col-8>
        <button ion-button clear small><i class="fa fa-minus text-primary"></i></button>
        <span class="product-qty">{{ global.product.qty }}</span>
        <button ion-button clear small><i class="fa fa-plus text-primary"></i></button>
      </ion-col>
    </ion-row>
  </div>
  <div class="product-discount-group" [ngClass]="{ 'hidden': productVariantList.length>0 }">
    <ion-row>
      <ion-col col-4><div class="title">{{ 'DISCOUNT' | translate}}</div></ion-col>
      <ion-col col-4>
        <ion-input type="text" placeholder="Input"></ion-input>
      </ion-col>
      <ion-col col-4>
        <ion-segment [(ngModel)]="discountType">
          <ion-segment-button small value="%">%</ion-segment-button>
          <ion-segment-button small value="$">$</ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>
  </div>
  <div class="product-remark-group">
    <ion-row>
      <ion-col col-12>
        <ion-textarea placeholder="Type some remark(s) here"></ion-textarea>
      </ion-col>
    </ion-row>
  </div>

</ion-content>
